<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>芯佑电商_我的订单</title>
    <#include "/website/commonWebsite.html">
    <!-- 分页插件 -->
    <script src="/website/js/jqPaginator.min.js" type="text/javascript"></script>
    <link href="/website/css/j-pagination.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<!--==头部==-->
<div class="header">
    <#include "/website/header.html">
</div>

<!--==内容区域==-->
<div class="home_n">
    <div  class="home_nr">
        <!--==banner==-->
        <div class="medat-ba">会员中心</div>
        <!--==内容==-->
        <div class="medat-nr">
            <!--==左侧==-->
            <#include "/website/left.html">
            <!--==右侧==-->
            <div class="medat-nr-ri">
                <!--标题-->
                <div class="meord-bt">
                    <span><a href="/website/personalData/me_order_list?page=1&limit=10" class="hover" id="allOrder">全部订单</a></span>
                    <span><a href="/website/personalData/me_order_list?page=1&limit=10&orderStatus=1" id="waitPay">待付款</a></span>
                    <span><a href="/website/personalData/me_order_list?page=1&limit=10&orderStatus=2" id="waitSend">待发货</a></span>
                    <span><a href="/website/personalData/me_order_list?page=1&limit=10&orderStatus=5" id="waitReceive">待收货</a></span>
                </div>
                <!--列表一-->
                <div class="meord-li">
                    <#if orderList.list?? && orderList.list?size &gt;0>
                        <#list orderList.list as item>
                            <!--头部-->
                            <div class="meord-li-t">
                                <input type="hidden" id="pk" value="${item.pk}">
                                <span>${item.order_time}</span>
                                <span>订单号: ${item.pk}</span>
                                <p class="box"><a href="javascript:;" class="bounceIn" onclick="cancelOrder(this)">删除订单</a></p>
                            </div>
                            <!--01-->
                            <#assign orderChildren=lists[item_index]>
                            <#list orderChildren as li>
                                <div class="sholis-lis borderx">
                                    <div class="sholis-lis-c" style="width: 400px; float: left; height: 90px; margin-right: 40px;">
                                        <h1><a href="#"><img src="//${li.product_pic}" alt=""></a></h1>
                                        <dl>
                                            <dt><a href="#">${li.product_name}</a></dt>
                                            <dd>${li.sku_name}</dd>
                                        </dl>
                                    </div>
                                    <div class="sholis-lis-r paddingkb" style="width: 165px; height: 90px; float: left; padding: 19px 10px; box-sizing: border-box; margin: 0px 20px;">
                                        <p>单价</p>
                                        <p><strong>¥${li.product_price}</strong></p>
                                        <p>${li.account}件</p>
                                    </div>
                                    <div class="sholis-lis-r paddingkb" style="width: 165px; height: 90px; float: left; padding: 19px 10px; box-sizing: border-box; margin: 0px 20px;">
                                        <p>总金额</p>
                                        <p><strong class="red">¥${li.c1}</strong></p>
                                        <p>(含运费：￥0.00)</p>
                                    </div>
                                </div>
                            </#list>
                            <!--订单信息-->
                            <div class="meord-li orderInfo" style="display: none">
                                <!--头部-->
                                <div class="shoinf-add-bt">订单信息</div>
                                <!--列表-->
                                <div class="meord-de-n">
                                    <dl>
                                        <dt>订单编号：</dt>
                                        <dd>${item.pk}</dd>
                                    </dl>
                                    <dl>
                                        <dt>订单状态：</dt>
                                        <#if item.order_status==1>
                                            <dd class="lan">待支付</dd>
                                        <#elseif item.order_status==2>
                                            <dd class="lan">已支付</dd>
                                        <#elseif item.order_status==3>
                                            <dd class="lan">已取消</dd>
                                        <#elseif item.order_status==4>
                                            <dd class="lan">已超时</dd>
                                        <#elseif item.order_status==5>
                                            <dd class="lan">已发货</dd>
                                        <#elseif item.order_status==6>
                                            <dd class="lan">已完成</dd>
                                        </#if>
                                    </dl>
                                    <dl>
                                        <dt>收货人：</dt>
                                        <dd>${item.c3}</dd>
                                    </dl>
                                    <dl>
                                        <dt>收货人电话：</dt>
                                        <dd>${item.c4}</dd>
                                    </dl>
                                    <dl>
                                        <dt>收货地址：</dt>
                                        <dd>${item.order_address_pk}</dd>
                                    </dl>
                                    <dl>
                                        <dt>运单号：</dt>
                                        <dd>${item.c1}( ${item.c2}) </dd>
                                    </dl>
                                    <dl>
                                        <dt>下单时间：</dt>
                                        <dd>${item.order_time}</dd>
                                    </dl>
                                    <dl>
                                        <dt>运费(快递)：</dt>
                                        <dd>¥0.00</dd>
                                    </dl>
                                    <dl>
                                        <dt>实付款：</dt>
                                        <dd><strong>¥${item.total_price}</strong></dd>
                                    </dl>
                                </div>
                            </div>
                            <!--底部-->
                            <div class="meord-li-b">
                                <div class="meord-li-bl">
                                    <span>总金额：<strong class="red">¥${item.total_price}</strong></span>
                                    <span>订单状态：
                                        <#if item.order_status==1>
                                            <strong class="lan">待支付</strong>
                                        <#elseif item.order_status==2>
                                            <strong class="lan">已支付</strong>
                                        <#elseif item.order_status==3>
                                            <strong class="lan">已取消</strong>
                                        <#elseif item.order_status==4>
                                            <strong class="lan">已超时</strong>
                                        <#elseif item.order_status==5>
                                            <strong class="lan">已发货</strong>
                                        <#elseif item.order_status==6>
                                            <strong class="lan">已完成</strong>
                                        </#if>
                                    </span>
                                </div>
                                <div class="meord-li-br">
                                    <input type="hidden" class="pk" value="${item.pk}">
                                    <#if item.order_status==1>
                                        <p><button type="button" onclick="toPay(this)">立即付款</button></p>
                                    </#if>
                                    <span><button type="button" onclick="showOrderDetail(this)" class="showOrderDetail">查看详情</button></span>
                                </div>
                            </div>
                        </#list>
                    </#if>
                </div><br>
                <!--翻页-->
                <div class="audio_cur_nr_fy">
                    <ul class="pagination" id="pagination">
                    </ul>
                    <input type="hidden" id="PageCount" runat="server" />
                    <input type="hidden" id="PageSize" runat="server" value="10" />
                    <input type="hidden" id="countindex" runat="server" value="10" />
                    <input type="hidden" id="visiblePages" runat="server" value="7" />
                </div>
            </div>
        </div>
    </div>
</div>

<!--==弹出背景==-->
<div id="dialogBg" class="claseDialogBtn"></div>

<!--==弹出内容==-->
<!--<div id="dialog" class="animated">
    &lt;!&ndash;内容区域可以替换&ndash;&gt;
    <div class="ord_who_t">
        &lt;!&ndash;头部&ndash;&gt;
        <div class="ord_who_t_bt">
            <div class="ord_who_t_bt1">取消订单</div>
            <div class="ord_who_t_bt2"><img src="/website/images/order_17.png" alt=""/></div>
        </div>
        &lt;!&ndash;中间&ndash;&gt;
        <div class="ord_who_t_l" id="yy">
            <div class="ord_who_t_li"><a href="javascript:check('a');" id="a" class="hover">信息填写错误，重新购买</a></div>
            <div class="ord_who_t_li"><a href="javascript:check('b');" id="b">我不想买了</a></div>
            <div class="ord_who_t_li"><a href="javascript:check('c');" id="c">我想在看看</a></div>
            <div class="ord_who_t_li"><a href="javascript:check('d');" id="d">其他原因</a></div>
        </div>
        &lt;!&ndash;按钮&ndash;&gt;
        <div class="ord_who_t_an">
            <div class="ord_who_t_an1"><a href="#">确定</a></div>
            <div class="ord_who_t_an2"><a href="javascript:;" class="claseDialogBtn">取消</a></div>
        </div>
    </div>
</div>-->

<!--==版权==-->
<script type="text/javascript">
    function load_home() {
        document.getElementById("viewDiv").innerHTML = '';
    }
</script>
<object type="text/html" data="/website/copyright" width="100%" height="370px" style="margin-bottom: -5px;"></object>

<!--==返回头部==-->
<script type="text/javascript" src="/website/js/backtop.js"></script>

</body>
<!--选择框-->
<script>
    function check(obj) {
        //alert("ok");
        $("#yy").find("a").removeClass("hover");
        //console.log(obj);
        $("#"+obj).addClass('hover');
    }

    $(function () {
        //选中图标
        $(".medat-nr-lel").find("a").removeClass("hover");
        $(".medat-nr-lel").find("a").eq(2).addClass("hover");
        showHover();
        loadpage();//加载分页
    })

    function loadpage() {
        $("#PageCount").val("${orderList.total}");
        var myPageCount = parseInt($("#PageCount").val());
        var myPageSize = parseInt($("#PageSize").val());
        var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
        $("#countindex").val(countindex);

        $.jqPaginator('#pagination', {
            totalPages: parseInt($("#countindex").val()),
            visiblePages: parseInt($("#visiblePages").val()),
            currentPage: ${currentPage},
            first: '<li class="first"><a href="javascript:;">首页</a></li>',
            prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>上一页</a></li>',
            next: '<li class="next"><a href="javascript:;">下一页<i class="arrow arrow3"></i></a></li>',
            last: '<li class="last"><a href="javascript:;">末页</a></li>',
            page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
            onPageChange: function (num, type) {
                /*"${productList}".page = num;//设置当前页码数*/
                if (type == "change") {
                    location.href="/website/personalData/me_order_list?page="+num+"&limit=3&orderStatus=${orderStatus}";
                    /*$.ajax({
                        url : '/website/home/activitylist',
                        type : 'GET',
                        data : {
                            'page' : num,
                            'limit' : 16
                        },
                        dataType : 'JSON',
                        success : function(resp) {
                            apperndFunction(resp.data.list);
                            loadData(resp.data.total);
                        }
                    });*/
                }
            }
        });
    }

    //显示详情
    function showOrderDetail(value){
        var showOrderDetail=$(value).attr("class");
        if(showOrderDetail=="showOrderDetail"){
            $(value).parent().parent().parent().prev().show();
            $(value).removeClass("showOrderDetail");
        }else{
            $(value).parent().parent().parent().prev().hide();
            $(value).addClass("showOrderDetail");
        }
    }

    //显示点击选中
    function showHover(){
        $(".meord-bt").find("a").removeClass("hover");
         var status = "${orderStatus}";
         console.log(status)
         if(status==1){
            $("#waitPay").addClass("hover");
         }else if(status==2){
            $("#waitSend").addClass("hover");
         }else if(status==5){
            $("#waitReceive").addClass("hover");
         }else{
            $("#allOrder").addClass("hover");
         }
    }

    //删除订单
    function cancelOrder(value){
        layer.confirm('您确定要删除该订单吗?',{btn: ['确定', '取消'],title:"提示"}, function() {
            var pk = $(value).parent().parent().find("#pk").val();
            $.ajax({
                url: '/website/personalData/orderDel',
                data: {'pk':pk},
                type: 'get',
                dataType: 'json',
                success: function (resp) {
                    layer.msg(resp.message);
                    if(resp.code==200){
                        window.location.reload();
                    }
                },
                error: function () {
                    layer.msg("系统错误")
                }
            })
        });
    }

    //支付
    function toPay(value){
        var pk = $(value).parent().parent().children(".pk").val();
        alert(pk)
        location.href="/aliPay/pay?pk="+pk;
    }
</script>
</html>